<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="text">
    <button>百度一下</button>

    <ul>
        <!-- <li>
            <a href=""></a>
        </li> -->
    </ul>

    <script>

            // https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=关键字
            //   wd 关键字
            //   此接口返回的是一个函数调用   window.baidu.sug({}) 

            //   是一个jsonp的接口


            var baidu = {
                sug: function(data) {
                    // data 就是请求成功之后的数据
                    console.log(data);
                    const {s} = data ;
                    console.log(s);
                    let html = '' ;
                   s.forEach(v=>{
                        html += `
                            <li>
                                <a href="https://www.baidu.com/s?wd=${v}">${v}</a>
                            </li>
                        `
                   })
                   const oUl = document.querySelector('ul') ;
                   oUl.innerHTML = html ;
                }
            }

            // sug这个函数是被后端调用的


            const oInp = document.querySelector('input') ;
            const oBtn = document.querySelector('button') ;

            oBtn.onclick = function() {
                // 
                const kd = oInp.value ;
                if(kd) {
                    const oS = document.querySelector('#s') ;
                    if(oS) {
                        oS.remove() ;
                    }
                    // 此时需要求请求数据
                    const oScript = document.createElement('script') ;
                    oScript.id = 's' ;
                    oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + kd ;
                    // 添加到页面上
                    document.body.appendChild(oScript) ;

                }
            }


            

    </script>   

    
    <!-- 页面一打开之后就会立即调用函数 -->
    <!-- <script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=关键字"></script> -->
    
    
</body>
</html>